<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.4.1.js"></script>

</head>
<body>
<div id="app">
    <div class="block">
        <el-carousel>
            <el-carousel-item v-for="item in list" :key="item">
                <img :src="item"/>
            </el-carousel-item>
        </el-carousel>

    </div>
    <div style="float: right;">
        <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tk&skin=pitaya" frameborder="0" width="260"
                height="195" allowtransparency="true"></iframe>
    </div>
    <template>
        <div class="test2" style="width:600px;height:400px; float: left;">
            <div id="myChart2" style="width:100%;height:278px;float:left;"></div>
        </div>
    </template>


</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {

            list: [
                '/image/shou1.jpg',
                '/image/shou2.jpg',
                '/image/shou3.jpg',
                '/image/shou4.jpg',
            ]

        },
        created() {

        },
        methods: {},
    })
</script>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('myChart2'));

    $.get("/messagebook/income", function (data) {
        console.log(data.data)
        myChart.setOption({
            title: {
                text: '医院预约财务情况', // 主标题
                subtext: '', // 副标题
                x: 'left' // x轴方向对齐方式
            },
            tooltip: {
                trigger: 'axis' // axis   item   none三个值
            },
            xAxis: {
                type: 'category',
                data: ['第一季度', '第二季度', '第三季度', '第四季度'], // x轴数据
                name: '' // x轴名称
                // x轴名称样式
                // nameTextStyle: {
                //   fontWeight: 600,
                //   fontSize: 18
                // }
            },
            yAxis: {
                type: 'value',
                name: '总金额' // y轴名称
                // y轴名称样式
                // nameTextStyle: {
                //   fontWeight: 600,
                //   fontSize: 18
                // }
            },
            legend: {
                orient: 'vertical',
                x: 'center',
                y: 'top',
                data: ['营收']
            },
            series: [
                {
                    name: '季度营收',
                    data: data.data,
                    type: 'line'
                }
            ]


        });
    })


</script>


<style>
    img {
        width: 100%;
        height: 100%;
    }

    #app {
        width: 100%;
        height: 100%;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
</html>
